<template>
  <div class="attributes">
    <div class="attribute-box">
      <div class="tag attribute">气血: {{ formatNumberToChineseUnit(strengthenInfo.health) }}</div>
      <div class="tag attribute">攻击: {{ formatNumberToChineseUnit(strengthenInfo.attack) }}</div>
      <div class="tag attribute">防御: {{ formatNumberToChineseUnit(strengthenInfo.defense) }}</div>
      <div class="tag attribute">
        暴击率:
        {{
          strengthenInfo?.critical > 0
            ? strengthenInfo?.critical * 100 > 100
              ? 100
              : (strengthenInfo?.critical * 100).toFixed(2)
            : 0
        }}%
      </div>
      <div class="tag attribute">
        闪避率:
        {{
          strengthenInfo.dodge > 0
            ? strengthenInfo.dodge * 100 > 100
              ? 100
              : (strengthenInfo.dodge * 100).toFixed(2)
            : 0
        }}%
      </div>
      <div class="tag attribute">炼器等级: {{ strengthenInfo.strengthen ?? 0 }}</div>
      <div class="tag attribute">装备评分: {{ formatNumberToChineseUnit(strengthenInfo.score) }}</div>
      <div
        class="tag attribute"
        @click="
          gameNotifys({
            title: '获得方式',
            message: '分解装备可获取',
            position: 'top-left'
          })
        "
        v-if="calculateCost"
      >
        拥有炼器石:
        {{ formatNumberToChineseUnit(player.props.strengtheningStone) }}
      </div>
      <div class="tag attribute" v-if="calculateCost">炼器消耗: {{ calculateCost }}</div>
      <div class="tag attribute" v-if="calculateEnhanceSuccessRate">
        成功率: {{ (calculateEnhanceSuccessRate * 100).toFixed(2) }}%
      </div>
    </div>
  </div>
</template>

<script setup>
  import { formatNumberToChineseUnit, gameNotifys } from '@/plugins/game'
  import { defineProps, defineOptions } from 'vue'

  // 定义组件名称
  defineOptions({
    name: 'weapon-tooltip'
  })

  // 定义props
  defineProps({
    calculateCost: {},
    calculateEnhanceSuccessRate: {},
    player: {},
    strengthenInfo: {}
  })
</script>
<style scoped>
  .attribute {
    width: calc(50% - 8px);
    margin: 4px;
    overflow: auto hidden;
  }

  .attribute-box {
    display: flex;
    flex-wrap: wrap;
  }

  /* 炼器弹窗 */

  .click-box button {
    margin-top: 10px;
    width: 100%;
  }

  /* 装备信息 */

  .collapse p,
  .monsterinfo-box p {
    display: contents;
  }

  /* 基础属性对比 */

  /* 属性对比 */

  /* 新手弹窗 */

  .newbieinfo-box p {
    margin-bottom: 10px;
  }

  @media only screen and (max-width: 768px) {
  }
</style>
<style>
  @media only screen and (max-width: 768px) {
    /* 新手弹窗 */
  }

  /* 上传按钮 */
</style>
